<template>
    <div>
        <div class="detail pad20">
            <Row>
                <Form :model="permission" :label-width="120"  ref="permission" :rules="ruleValidate">
                    <Col span="6"  offset="1">
                        <FormItem label="策略组名称:" prop="name">
                            <Input v-model="permission.name" placeholder=""></Input>
                        </FormItem>
                    </Col>    
                    <Col span="23"  offset="1">
                        <FormItem label="操作权限：">
                            <div v-for="(value,key) in operations" :key="key">                    
                                <Col span="18" style="border-bottom:1px solid #e9e9e9;margin-bottom:6px;">
                                    <div style="font-weight:bold;font-size:16px;">{{origin_actions[key]}}</div>
                                    <div v-for="item in value" :key="item">
                                        <div v-if="origin_actions[item]"> 
                                            <div style="font-size:14px;padding-bottom:6px;">
                                                <CheckboxGroup v-model="permission.actions">
                                                    <Checkbox :label="item" style="color:#4074e1;font-weight:bold;">{{origin_actions[item]}}</Checkbox>
                                                </CheckboxGroup>
                                            </div>                                  
                                            <CheckboxGroup v-if="actions[item]&&actions[item].length > 0" v-model="permission.actions" style="padding-left:30px;padding-bottom:6px;margin-bottom:6px;">
                                                操作：   <Checkbox :label="sitem" v-for="sitem in actions[item]" :key="sitem">{{origin_actions[sitem]}}</Checkbox>
                                            </CheckboxGroup>
                                        </div> 
                                    </div>                                   
                                </Col>
                            </div>
                        </FormItem>
                    </Col>     
                </Form>          
            </Row>
        </div>
        <div :class="slidetoggle?'fixed-bottom':'fixed-bottom sidehide' ">
            <Row class="pro-pagesize">
                <Col :sm="24" :md="24" :lg="24">
                    <Button type="ghost"  size="large" @click="cancel" class="fl mr10 ">返回</Button>
                    <Button type="primary" size="large" @click="permission_send" class="fl mr10">保存</Button>                         
                </Col>
            </Row>
        </div>
    </div>
</template>
<script>
import { getOperation , permissionCreate , PermissionGetDetail , PermissionUpdate} from '../../api/yun_permission'
export default {
    data () {
      return {
            showactionModal:true,
            closeable:false,
            loading:false,
            tableloading:true,
            tableaction:true,
            all_permission:[],
            actions:{

            },
            permission:{
                actions:[],
                name:''
            },
            operations:{

            },
            origin_actions:{},
            actionlist:[],
            columns1:[
                {
                    type: 'index',
                    title:'序号',
                    width: 60,
                    align: 'center'
                },
                {
                    title: '角色名',
                    key: 'cname',
                    align: 'center',
                    width:200
                },
                {
                    title: '拥有者',
                    key: 'cname',
                    align: 'center',
                    width:200
                },
                {
                    title: '创建时间',
                    key: 'cname',
                    align: 'center',
                    width:200
                },
            ],
            permission_list:[],
            ruleValidate:{
                name: [
                    { required: true, message: '请输入策略组名称', trigger: 'blur' }
                ],
            }
      }
    },
    computed: {
        slidetoggle(){
            return this.$store.state.sildeshow
        }
    },
    mounted () {
      this.getPermission() 
      this.getDetail() 
    },
    methods: {
        getDetail(){
            console.log(this.$route)
            let _params = {
                permission_id : this.$route.params.id
            }
            new Promise((resolve,reject)=>{
                    PermissionGetDetail(_params).then(response=>{
                        console.log(response)
                        if(response.data.err == 0){
                            this.permission = response.data.data
                        }
                        resolve();
                    }).catch(error => {
                    reject(error);
                })
            })
        },
        cancel(){
            this.$router.push({name:'permission'})
        },
        permission_send(){
            this.$refs['permission'].validate((valid) => {
                this.permission.permission_id = this.$route.params.id
                new Promise((resolve,reject)=>{
                        PermissionUpdate(this.permission).then(response=>{
                            console.log(response)
                            if(response.data.err == 0){
                                this.$router.push({name:'permission'})
                            }else{
                                this.$Message.error(response.data.info)
                            }
                            resolve();
                        }).catch(error => {
                        reject(error);
                    })
                })
            })
        },
        getPermission(){
            new Promise((resolve,reject)=>{
                    getOperation().then(response=>{
                        console.log(response)
                        if(response.data.err == 0){
                            this.operations = response.data.data.operations
                            this.origin_actions = response.data.data.origin_actions
                            this.actions = response.data.data.actions
                        }
                        resolve();
                    }).catch(error => {
                    reject(error);
                })
            })
        },

  }
}
</script>
<style scoped>
.fixed-bottom{
    padding-left: 20px;
    padding-right: 20px;
    height: 80px;
    line-height: normal !important;
    position: fixed;
    left: 210px;
    right: 0;
    bottom: 0;
    z-index: 999;
    text-align: center;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.28);
}
.sidehide{
    left: 75px;
}
.pad20{
    padding: 20px;
}
</style>


